<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import commonInputModule from '../common-input-module.vue'

import type { NodeProps } from '@vue-flow/core'
import { LLMNodeData, LLMNodeEvents } from './index'

defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
</script>

<template>
  <div class="max-w-[520px] rounded-sm border border-gray-200 bg-white p-3 shadow-md">
    <Handle type="source" :position="Position.Left" />
    <div class="flex flex-col gap-y-4">
      <div class="flex justify-between">
        <div class="flex items-center gap-x-2">
          <img src="~@/assets/images/icon_End.png" class="h-4 w-4" alt="End icon" />
          <div class="flex flex-col gap-y-1">
            <p class="text-sm text-gray-500">End</p>
          </div>
        </div>
      </div>

      <span class="text-sm text-gray-500"
        >The final node of the workflow, used to return the result information after the workflow runs.</span
      >

      <div class="flex items-center justify-between gap-x-10">
        <Label class="w-40"> Select Mode </Label>
        <Select>
          <SelectTrigger class="w-full">
            <SelectValue placeholder="Select Mode" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="return"> Return variable, generated by the Bot. </SelectItem>
              <SelectItem value="answer"> Answer directly using Answer Content </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>

      <div class="grid gap-y-3">
        <common-input-module />
      </div>
    </div>
  </div>
</template>
